<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../jquery-cores/jquery-1[1].3.min.js"></script>
<style>
body{
	margin:0px;
	padding:0px;
	font-family:12px;
}
button{
	display:block;
	border:none;
	margin:5px;
	border:1px solid #FF9;
}
.btnAccess{
	background:#C36;
}
.hover{
	border:1px dashed #0C9;
}
.btnSubmit{
	background:#C63;
}
.dog{
	border:1px solid #06F;
	background:#0CF;
	width:600px;
	padding:10px;
	margin:10px;
	display:none;
}
.list{
	list-style:none;
	margin:20px;
	padding:0px;
	font-size:12px;
}
.list li{
	float:left;
	border:1px solid #666;
	padding:20px;
	background:#9CF;
}
.list .ltemHover{
	font-size:14px;
	color:#933;
	background:#3CF;
}
</style>
</head>

<body>
<button class="btnAccess">Access</button>
<button class="btnSubmit">Submit</button>
<button class="btnAccess2">Access2</button>
<ul class="list">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
</ul>
<div class="dog">with the button action will appear!</div>
<script>
$(document).ready(function(){
	$('.btnAccess, .btnSubmit').hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});
	$('.btnAccess').click(function(){
		$('.dog').animate({height: "600", width: "show", opacity:"show"}, 'slow');
	});
	$('.btnSubmit').click(function(){
		$('.dog').animate({height: "hide", width: "hide", opacity:"hide"}, 'slow');
	});
	$('.btnAccess2').click(function(){
		$('.dog')
		.css('position','absolute')
		.show()
		.fadeTo('slow',0.5)
      	.animate({left: 650}, 'slow')
      	.fadeTo('slow',1.0)
		.animate({left: 0}, 'slow')
      	.slideUp('slow');
	});
	$('.list li').hover(function(){
		$(this).addClass('ltemHover')
		.fadeTo('slow',0.5);
	},function(){
		$(this).removeClass('ltemHover')
		.fadeTo('slow',1.0);
	});
});
</script>
</body>
</html>
